﻿<phone:PhoneApplicationPage
    x:Class="eventful.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    toolkit:TiltEffect.IsTiltEnabled="True"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="False">

	<toolkit:TransitionService.NavigationInTransition>
		<toolkit:NavigationInTransition>
			<toolkit:NavigationInTransition.Backward>
				<toolkit:TurnstileTransition Mode="BackwardIn"/>
			</toolkit:NavigationInTransition.Backward>
			<toolkit:NavigationInTransition.Forward>
				<toolkit:TurnstileTransition Mode="ForwardIn"/>
			</toolkit:NavigationInTransition.Forward>
		</toolkit:NavigationInTransition>
	</toolkit:TransitionService.NavigationInTransition>
	<toolkit:TransitionService.NavigationOutTransition>
		<toolkit:NavigationOutTransition>
			<toolkit:NavigationOutTransition.Backward>
				<toolkit:TurnstileTransition Mode="BackwardOut"/>
			</toolkit:NavigationOutTransition.Backward>
			<toolkit:NavigationOutTransition.Forward>
				<toolkit:TurnstileTransition Mode="ForwardOut"/>
			</toolkit:NavigationOutTransition.Forward>
		</toolkit:NavigationOutTransition>
	</toolkit:TransitionService.NavigationOutTransition>

	<!--LayoutRoot is the root grid where all page content is placed-->
	<Grid x:Name="LayoutRoot" Background="Transparent">
		<!--Panorama control-->
		<phone:Panorama Title="jacksonville events">
			<phone:Panorama.Background>
				<ImageBrush ImageSource="Assets/PanoramaBackground.png" Opacity=".5"/>
			</phone:Panorama.Background>

			<!--Panorama item one-->
			<phone:PanoramaItem Header="">
				<Grid>
					<!--Single line list with text wrapping-->
					<TextBlock x:Name="nonetwork" Height="600" TextWrapping="Wrap" Tap="TextBlock_Tap_1" Visibility="Collapsed">
                        This app requires a network connction. Tap to retry.
					</TextBlock>
					<StackPanel x:Name="menu" Margin="0,-38,0,12" Height="400" >
						<TextBlock Text="Concerts" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Tap="TextBlock_Tap"/>
						<TextBlock Text="Family" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Tap="TextBlock_Tap2"/>
						<TextBlock Text="Sports" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Tap="TextBlock_Tap3"/>
						<TextBlock Text="Performing Arts" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Tap="TextBlock_Tap4"/>
					</StackPanel>
				</Grid>
			</phone:PanoramaItem>

			<!--Panorama item two-->
			<phone:PanoramaItem Header="venues">
				<!--Double line list with image placeholder and text wrapping using a floating header that scrolls with the content-->

				<phone:LongListSelector  x:Name="MainLongListSelector" Margin="0,-38,-22,2" ItemsSource="{Binding Venues}" Foreground="Red" SelectionChanged="MainLongListSelector_SelectionChanged" >
					<phone:LongListSelector.ItemTemplate>
						<DataTemplate>
							<StackPanel Orientation="Horizontal" Margin="12,2,0,4" Height="105" Width="432">
								<!--Replace rectangle with image-->
								<Image Width="99" Height="99" Source="{Binding LargeImage}" Stretch="Fill"/>
								<StackPanel Width="311" Margin="8,-7,0,0" >
									<TextBlock Height="99" Text="{Binding LineOne}" TextWrapping="Wrap" Margin="10,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" />
									<!-- <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="10,-2,10,0" Style="{StaticResource PhoneTextSubtleStyle}" /> -->
								</StackPanel>
							</StackPanel>
						</DataTemplate>
					</phone:LongListSelector.ItemTemplate>
				</phone:LongListSelector>
			</phone:PanoramaItem>

			<!--Panorama item three-->
			<phone:PanoramaItem Header="popular" Orientation="Horizontal" >
				<Grid>
					<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
						<TextBlock>Events by</TextBlock>
						<Image Width="88" Source="http://api.eventful.com/images/powered/eventful_88x31.gif"/>
					</StackPanel>

					<!--Double wide Panorama with large image placeholders -->
					<ListBox Grid.Row="0" x:Name="listboxDataBinding" ItemsSource="{Binding Items}" Width="800"  SelectionChanged="listboxDataBinding_SelectionChanged">
						<ListBox.ItemsPanel>
							<ItemsPanelTemplate>
								<toolkit:WrapPanel Orientation="Horizontal" />
							</ItemsPanelTemplate>
						</ListBox.ItemsPanel>
						<ListBox.ItemTemplate>
							<DataTemplate>
								<toolkit:HubTile Title="{Binding LineOne}" Margin="3"
                             Message="{Binding LineTwo}"
                             GroupTag="foo1"
                             Source="{Binding LargeImage}"/>
							</DataTemplate>
						</ListBox.ItemTemplate>
					</ListBox>
				</Grid>
			</phone:PanoramaItem>
		</phone:Panorama>
	</Grid>
</phone:PhoneApplicationPage>